<template>
    <view class="content">
        <view class="row b-b">
            <text class="tit">联系人</text>
            <input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">手机号</text>
            <input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
        </view>
        <view class="row b-b">
            <text class="tit">地址</text>
            <text @click="chooseLocation" class="input">
                {{ addressData.addressName }}
            </text>
            <text class="yticon icon-shouhuodizhi"></text>
        </view>
        <view class="row b-b">
            <text class="tit">门牌号</text>
            <input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌" placeholder-class="placeholder" />
        </view>

        <view class="row default-row">
            <text class="tit">设为默认</text>
            <switch :checked="addressData.defaule" color="#fa436a" @change="switchChange" />
        </view>
        <button class="add-btn" @click="confirm">提交</button>
    </view>
</template>

<script setup>
import { ref } from 'vue';
// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;

let addressData = reactive({
    name: '',
    mobile: '',
    addressName: '在地图选择',
    address: '',
    area: '',
    default: false
});
let manageType = ref('');
onLoad((option) => {
    console.log(option);
    let title = '新增收货地址';
    if (option.type === 'edit') {
        title = '编辑收货地址';
        addressData = JSON.parse(option.data);
    }
    manageType.value = option.type;
    uni.setNavigationBarTitle({
        title
    });
});
let switchChange = (e) => {
    addressData.default = e.detail;
};

//地图选择地址
const chooseLocation = () => {
    uni.chooseLocation({
        success: (data) => {
            addressData.value.addressName = data.name;
            addressData.address = data.name;
        }
    });
};

//提交
let confirm = () => {
    console.log('confirm---');
    let data = addressData;
    if (!data.name) {
        gProperties.$api.msg('请填写收货人姓名');
        return;
    }
    if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
        gProperties.$api.msg('请输入正确的手机号码');
        return;
    }
    if (!data.address) {
        gProperties.$api.msg('请在地图选择所在位置');
        // return;
    }
    if (!data.area) {
        gProperties.$api.msg('请填写门牌号信息');
        return;
    }
    uni.$emit('address_refresh_list', {
        type: manageType.value,
        content: data
    });
    gProperties.$api.msg(`地址${manageType.value == 'edit' ? '修改' : '添加'}成功`);
    // 真实场景，需要网络请求，返回成功后，才能返回上个页面。
    setTimeout(() => {
        uni.navigateBack();
    }, 800);
};
</script>

<style lang="scss">
page {
    background: $page-color-base;
    padding-top: 16upx;
}

.row {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 30upx;
    height: 110upx;
    background: #fff;

    .tit {
        flex-shrink: 0;
        width: 120upx;
        font-size: 30upx;
        color: $font-color-dark;
    }
    .input {
        flex: 1;
        font-size: 30upx;
        color: $font-color-dark;
    }
    .icon-shouhuodizhi {
        font-size: 36upx;
        color: $font-color-light;
    }
}
.default-row {
    margin-top: 16upx;
    .tit {
        flex: 1;
    }
    switch {
        transform: translateX(16upx) scale(0.9);
    }
}
.add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690upx;
    height: 80upx;
    margin: 60upx auto;
    font-size: $font-lg;
    color: #fff;
    background-color: $base-color;
    border-radius: 10upx;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
